<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocketLog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script src="layer/layer.js"></script>
	<style>
		ul{counter-reset:sectioncounter;}
		 .active {
          list-style: square url("https://www.w3cschool.cn/statics/images/w3c/sqpurple.gif");
        }

	</style>
</head>
<body>
<div class="container" style="width:98%">
    <div class="row">
        <div style="height: 5px;"></div>
        <div class="col-md-10 col-md-offset-1" >
            <div class="panel panel-primary">
                <div class="panel-heading">日志控制台</div>
                <div class="panel-body">
					<div class="checkbox">
					
					<label>
					  Aop监听&nbsp;：&nbsp;&nbsp;&nbsp;<input type="checkbox" checked="checked" id="aop">
					</label>
					
					<label>
					  异常监听&nbsp;：&nbsp;&nbsp;&nbsp;<input type="checkbox" id="e">
					</label>
					 服务名称：
					 <label>
					  <input type="text" class="form-control" id="serverName" >
					</label>
					
					 Clazz：
					 <label>
					  <input type="text" class="form-control" id="clazz" >
					</label>
					
				  </div>
					
					<div>
                        <p class="text-primary">日志检索：</p>
                        <div class="row">
                            <div class="col-xs-9">
                                <input type="text" class="form-control" id="replaceVal" placeholder="请输入需要高亮的内容以 “|” 隔开" >
                            </div>
                            <div class="col-xs-3">
                                <button type="button" class="btn btn-primary btn-block" id="replace">查询</button>
                            </div>
                        </div>
                    </div>
				
                    <div>
                        <p class="text-primary" id="state">。。。</p>
                        <div id="testHtml" style="overflow:auto;">
                            <ul>
                               
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="panel-footer">&copy; 2021 372138617@qq.com</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="highlight.js"></script>
 <script type="text/javascript">
		
		var i =0;
		var socket = null;
	 
		
		var random = function (lower, upper) {
			return Math.floor(Math.random() * (upper - lower)) + lower;
		}
			
		var josnToTab = function(json){
			var html = "<table class='table table-striped'>";
			
			var num = json.num;
				delete json['num'];
			html+="<thead>";
			html += "<tr>";
			html+="<th>num</th>";
			for(k in json){
				html+="<th>"+k+"</th>";
			}
			html += "</tr>";
			html+="</thead>";
			
			html+="<tbody>";
			html += "<tr>";
			
			html+="<td>"+num+"</td>";
			
		

			for(k in json){
				html+="<td>"+json[k]+"</td>";
			}
			html += "</tr>";
			html+="</tbody>";
			html += "</table>";
			return html;
		}
		 
		 
		 function connect(){
			var clientId = "client"+random(1,100000);	 
			 socket = new WebSocket("ws://localhost:9005/webSocket/"+clientId+"/"+"log");
		     socket.onmessage = function(event){
				
				 
				var json = JSON.parse(event.data); 
				if($("#e").is(':checked')){
					
					if(event.data.indexOf("Exception")){
						//layer.alert('见到你真的很高兴', {icon: 5});
					}
				}
				
				var serverName = $.trim($("#serverName").val());
				var showText = false;
				if(json.serverName.indexOf(serverName)==-1){
						 return;
				}
				
				var clazz = $.trim($("#clazz").val());
				var clazzStr = json.classMethod||json.clazz;
				
				debugger;
				
				if($("#aop").is(':checked')){
					if(undefined!=json.action){
						showText = true;
					}else{
						return;
					}
				}else{
					if(undefined==json.action){
						showText = true;
					}else{
						return;
					}
				}
				
				
				if(clazzStr.indexOf(clazz)!=-1||clazzStr.indexOf(clazz)!=-1){
					showText = true;
				}else{
					showText = false;
				}
				
				
				if(showText){
					i++;
					json['num'] = i;
					$("#testHtml li").removeClass("active");
					$("#testHtml li:first").addClass("active");
					
					 $("#testHtml ul").prepend("<li>"+josnToTab(json)+"</li>").fadeIn('slow');;
					 
					 $("#count").html(i);
					 
					 $("#replace").trigger("click");
				}
				
				 
				
             };
             socket.onopen = function(event){
               
                 var htm  = "已连接" +" client ID  [" +clientId+"]"+"<span id='count' style='margin-left:10px;color:red'>0</span>";
				 //信息框-例1

				
				 $("#state").html("<li>"+htm+"</li>");
             };
             socket.onclose = function(event){
                 var ta = document.getElementById('responseText');
                 ta.value = "已关闭";
             };
		 
		 }
		 
		 
	
	$(document).ready(function(){
		
		if(!window.WebSocket){
				 window.WebSocket = window.MozWebSocket;
			 }
			 if(window.WebSocket){
			 
				
				connect()
			 }else{
				 alert("您的浏览器不支持WebSocket协议！");
			 }
		
	});	 
    
    /* 保存初始测试文本内容 */
    
    /* 测试按钮点击 */
    $("#replace").click(function () {
        var val=$.trim($("#replaceVal").val());
		
		if(val == ""){
			return;
		}
		
		var oldStr=$("#testHtml").html();
        if(!val){
            alert('请输入需要高亮的内容');
            return;
        }
        /* 类级别插件调用，返回 添加高亮效果 的字符串 */
        var newStr=$.highlight(oldStr,{
            color:'#FF0000',// 高度颜色，默认:#f00
            weight:true,    // 是否加粗，默认:不加粗
            keys:val        //需要高亮的值，必须的
        });
        $("#testHtml").html(newStr);
    });

    /* 对象级别插件调用 将选择器元素的 html 值设置为高亮 */
    $("#testHtml").highlight({
        color:'#ff00ff',// 高度颜色，默认:#f00
        weight:true,    // 是否加粗，默认:不加粗
        keys:'前端|C|QQ'        //需要高亮的值，必须的
    });
</script>

  

</body>
</html>